<template>
  <!-- 交易报表 -->
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="orderId">
        <el-input v-model="list.filter.orderId" placeholder="订单号" />
      </el-form-item>
      <el-form-item prop="productName">
        <el-input v-model="list.filter.productName" placeholder="商品名称" />
      </el-form-item>
      <el-form-item prop="payNo">
        <el-input v-model="list.filter.payNo" placeholder="支付单号" />
      </el-form-item>
      <el-form-item prop="belongMerchantId">
        <merchantSelect
          v-model="list.filter.belongMerchantId"
          noPermission
          placeholder="所属商户"
        />
      </el-form-item>
      <el-form-item prop="belongSubMerchantId">
        <SubMchSelect
          v-model="list.filter.belongSubMerchantId"
          noPermission
          placeholder="所属店铺"
        />
      </el-form-item>
      <el-form-item prop="saleMerchantId">
        <merchantSelect
          v-model="list.filter.saleMerchantId"
          noPermission
          placeholder="销售商户"
        />
      </el-form-item>
      <el-form-item prop="saleSubMerchantId">
        <SubMchSelect
          v-model="list.filter.saleSubMerchantId"
          noPermission
          placeholder="销售店铺"
        />
      </el-form-item>
      <el-form-item prop="reasonTypeList">
        <KiSelect
          v-model="list.filter.reasonTypeList"
          :options="reasonTypeOpt"
          placeholder="交易类型"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="authorize" v-if="isPintai">
        <KiSelect
          v-model="list.filter.authorize"
          :options="authorizeOpt"
          placeholder="授权情况"
        />
      </el-form-item>
      <el-form-item prop="productSource">
        <KiSelect
          v-model="list.filter.productSource"
          :options="[
            { dataName: '是', dataValue: '1' },
            { dataName: '否', dataValue: '0' }
          ]"
          placeholder="是否云仓市场"
        />
      </el-form-item>
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="list.filter.startTime"
          type="date"
          placeholder="开始时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="list.filter.endTime"
          type="date"
          placeholder="结束时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="budget">
        <KiSelect
          v-model="list.filter.budget"
          :options="[
            { dataName: '收入', dataValue: '1' },
            { dataName: '支出', dataValue: '2' }
          ]"
          placeholder="收支范围"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <span>
        <ExportExcel
          url="/sot-admin-api/report/report/orderReportDownload"
          name="导出"
          :param="{
            merchantId: getReportMchId,
            ...list.filter,
            orderBy: 'create_time desc'
          }"
        />

        <span class="mr-20px">
          收入合计:
          <span class="text-18px text-[#E65D6E]">
            {{ totalIncome | $cent2yuan }}
          </span>
        </span>
        <span class="mr-20px">
          支出合计:
          <span class="text-18px text-[#30B08F]">
            {{ totalPay | $cent2yuan }}
          </span>
        </span>
        <!-- <span class="mr-20px">
          引入方分成合计:
          <span class="text-18px text-[#30B08F]">
            {{ agencyIncome | $cent2yuan }}
          </span>
        </span> -->
      </span>

      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column type="index" />
      <el-table-column label="商品名称" prop="productName" />
      <el-table-column label="商品数量" prop="quantity" />
      <el-table-column label="类型">
        <template v-slot="{ row }">
          <span v-if="row.budgetType == 1">收入</span>
          <span v-if="row.budgetType == 2">支出</span>
        </template>
      </el-table-column>
      <el-table-column label="所属商户" prop="belongMerchantName" />
      <el-table-column label="所属店铺" prop="belongSubMerchantName" />
      <el-table-column label="销售商户" prop="saleMerchantName" />
      <el-table-column label="销售店铺" prop="saleSubMerchantName" />
      <el-table-column label="交易类型">
        <template v-slot="{ row }">
          {{ row.reasonType | $value2label(reasonTypeOpt) }}
        </template>
      </el-table-column>
      <el-table-column label="交易金额(元)">
        <template v-slot="{ row }">
          <span
            :class="{
              addMoney: row.budgetType == 1,
              reduceMoney: row.budgetType == 2
            }"
          >
            {{ row.money | $cent2yuan }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="orderId" />
      <el-table-column label="支付单号" prop="payNo" />
      <el-table-column label="支付方式">
        <template v-slot="{ row }">
          <span v-if="row.payMethod == 0">银联</span>
          <span v-else-if="row.payMethod == 1">微信</span>
          <span v-else-if="row.payMethod == 2">支付宝</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="updateTime" width="160" />
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import merchantSelect from '@/components/merchantSelect'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import TimeRangePicker from 'time-range-picker'
import { reasonTypeOpt } from './reasonTypeOpt.js'
import SubMchSelect from '@/components/SubMchSelect'
let _this = null
export default {
  components: {
    merchantSelect,
    SubMchSelect
  },
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'sot-admin-api/report/report',
        axiosConfig: {
          getList: {
            url: 'orderReportInfo'
          }
        },
        list: {
          filter: {
            startTime: TimeRangePicker.defaultDate.currentMonth[0],
            endTime: TimeRangePicker.defaultDate.currentMonth[1]
          }
        }
      },
      {
        afterGetList (res) {
          if (res.errorCode == '00000') {
            let data = res.data?.records[0] || null
            if (data) {
              _this.list.data = data.orderList //表格
              _this.totalIncome = data.totalIncome //收入合计
              _this.totalPay = data.totalPay //支出合计
              _this.agencyIncome = data.agencyIncome //引入方分成合计
            }
          }
        } // 请求列表之后
      }
    ),
  data () {
    return {
      reasonTypeOpt, //交易类型
      authorizeOpt: [
        { dataValue: 0, dataName: '否' },
        { dataValue: 1, dataName: '授权' },
        { dataValue: 2, dataName: '被授权' }
      ],
      totalIncome: 0,
      totalPay: 0,
      agencyIncome: 0,
      pageTotal: 0
    }
  },
  created () {
    _this = this
  },
  computed: {
    ...mapGetters(['userInfo']),
    getReportMchId () {
      //平台查全部
      const userInfo = this.userInfo
      return userInfo.userType == 0 ? '' : userInfo.merchantId
    },
    isPintai () {
      //是否平台
      return this.userInfo.userType == 0
    }
  }
}
</script>
<style lang="scss" scoped>
.addMoney {
  color: #e65d6e;
}

.reduceMoney {
  color: #30b08f;
}
</style>
